@<template>
  <div class="zhubo-box">
    <!-- 轮播图 -->
    <div class="top">
    <el-carousel :interval="2000" type="card" height="200px">
      <el-carousel-item v-for="(item,index) in getlunboList" :key="index">
        <img class="medium" :src="item.pic" alt="">
      </el-carousel-item>
    </el-carousel>
    </div>
    <!-- 电台分类 -->
    <div class="RadioClass flex-one">
      <div class="RadioClass-item" v-for="(item,index) in radioData" :key="index">
        <img :src="item.pic56x56Url" alt="">
        <div>{{item.name}}</div>
      </div>
    </div>

    <div class="">
       <!-- 个性电台推荐 
       1  名称是动态的-->
      <ZhuboCard name='个性电台推荐' :fatherData = 'RecommentData'></ZhuboCard>
      <ZhuboCard name='创作|翻唱' :fatherData = 'coverList'></ZhuboCard>
      <ZhuboCard name='3D|电子' :fatherData = 'DList'></ZhuboCard>
      <ZhuboCard name='音乐故事' :fatherData = 'StoryList'></ZhuboCard>
       <ZhuboCard name='情感调频' :fatherData = 'EmotionalList'></ZhuboCard>
        <ZhuboCard name='二次元' :fatherData = 'quadraticList'></ZhuboCard>
    </div>
  </div>
</template>

<script>
import {getlunbo,getRadioClass,getRecomment,getRecommentClass} from '@/network/zhubo'
import ZhuboCard from '@/components/ZhuboCard'
export default {
  data(){
    return{
      getlunboList:[],
      radioData:[],
      RecommentData:[],
      coverList:[],
      DList:[],
      StoryList:[],
      EmotionalList:[],
      quadraticList:[],
    }
  },
  created(){
     this.getlunbom()
     this.getRadioClassM()
     this.getRecommentM() //个性
     this.getcover(2001)//翻唱
     this.getD(10002) //3D|电子
     this. getStoryClass(2)//音乐故事
     this.getEmotional(3)//情感调频
     this.getquadratic(3001)//二次元
  },
  components:{
    ZhuboCard
  },
  methods:{
    getlunbom(){
      getlunbo('dj/banner').then(res=>{
        // console.log(res)
        this.getlunboList = res.data
      })
    },
    getRadioClassM(){
      getRadioClass('dj/catelist').then(res=>{
        // console.log(res)
        this.radioData = res.categories
      })
    },
    // 个性
    getRecommentM(){
      getRecomment('/dj/recommend').then(res=>{
        // console.log(res)
        this.RecommentData = res.djRadios.splice(0,4)
      })
    },
    //翻唱
    getcover(type){
      //网络请求
      getRecommentClass('/dj/recommend/type',{
        type:type
      }).then(res=>{
        //  console.log(res)
         this.coverList = res.djRadios.splice(0,4)
      })
    },
    //3D
     getD(type){
      //网络请求
      getRecommentClass('/dj/recommend/type',{
        type:type
      }).then(res=>{
        //  console.log(res)
         this.DList = res.djRadios.splice(0,4)
      })
    },
    //音乐故事
    getStoryClass(type){
      //网络请求
      getRecommentClass('/dj/recommend/type',{
        type:type
      }).then(res=>{
        //  console.log(res)
         this.StoryList = res.djRadios.splice(0,4)
      })
    },
    //情感调频
     getEmotional(type){
      //网络请求
      getRecommentClass('/dj/recommend/type',{
        type:type
      }).then(res=>{
        //  console.log(res)
         this.EmotionalList = res.djRadios.splice(0,4)
      })
    },
    //二次元
    getquadratic(type){
      //网络请求
      getRecommentClass('/dj/recommend/type',{
        type:type
      }).then(res=>{
        //  console.log(res)
         this.quadraticList = res.djRadios.splice(0,4)
      })
    },
  }
};
</script>

<style scoped lang='less'>
//轮播图样式
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
   border-radius: 10px;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
   border-radius: 10px;
}
//

.zhubo-box{
  .top{
     padding-top: 20px;
     img{
       width:100%;
       height: 100%;
     }
  }
  .RadioClass{
    margin-left:40px;
      .RadioClass-item{
        cursor: pointer;
         height: 100px;
         width: 100px;
         padding: 20px 20px;
         margin: 0 10px;
         margin-bottom: 20px;
         img{
           width: 50px;
           height: 50px;
          padding-left: 5px;
         }
         div{
           font-size: 12px;
           text-align: center;
           font-family: 楷体;
           font-weight: 700;
         }
      }
      .RadioClass-item:hover{
        height: 100px;
        background: rgba(0, 0, 255, 0.1);
         width: 100px;
         padding: 20px 20px;
         margin: 0 30px;
         margin-bottom: 20px;
      }
  }
  .header-tab{
    height: 40px;
    border-bottom: 2px solid red;
  }
}
</style>